﻿.app {width:100%;height:100%;background-color:#fff;}
.header, .sider, .title, .content {position:absolute;}
.sider {top:0;left:0;bottom:0;width:60px;background-color:#003f7d;color:#ccc;}
.header, .content {left:60px;right:0;}
.header {
    top:0;height:50px;line-height:50px;font-size:28px;font-weight:bold;
    padding:0 10px;border-bottom:1px solid #ccc;
}
.title {top:10px;right:0;height:30px;line-height:30px;font-weight:bold;padding:0 10px;color:#fff;}
.content {top:50px;bottom:0;overflow:auto;}

.logo {color:#5bc0de;font-size:2rem;width:60px;text-align:center;}
.logo:before {margin:0;}
.menu, .menu li {width:60px;text-align:center;padding:15px 0;cursor:pointer;}
.menu li .icon {font-size:1.6rem;}
.menu li .icon.size {font-size:2rem;}
.menu li.active {color:#5cb85c;}

.pln {color: #4d4d4c; }
@media screen {
    .str {color: #718c00; }
    .kwd {color: #8959a8; }
    .com {color: #8e908c; }
    .typ {color: #4271ae; }
    .lit {color: #f5871f; }
    .pun {color: #4d4d4c; }
    .opn {color: #4d4d4c; }
    .clo {color: #4d4d4c; }
    .tag {color: #c82829; }
    .atn {color: #f5871f; }
    .atv {color: #3e999f; }
    .dec {color: #f5871f; }
    .var {color: #c82829; }
    .fun {color: #4271ae; }
}
@media print, projection {
    .str {color: #060; }
    .kwd {color: #006;font-weight: bold; }
    .com {color: #600;font-style: italic; }
    .typ {color: #404;font-weight: bold; }
    .lit {color: #044; }
    .pun, .opn, .clo {color: #440; }
    .tag {color: #006;font-weight: bold; }
    .atn {color: #404; }
    .atv {color: #060; } 
}
ol.linenums {margin-top: 0;margin-bottom: 0; }
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 {  /* */ }
li.L1,li.L3,li.L5,li.L7,li.L9 {  /* */ }

pre {font-family:inherit;line-height:20px;}
pre.code {
    border:1px solid #ccc;border-left-width:5px;border-left-color:#337ab7;padding:5px;
    -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}
pre.code {border-left:1px solid #ccc;}
.source code {font-size:100%;display:block;padding:1px 12px;margin:0;background-color:#fff;color:#4D4E53;}
.prettyprint.linenums {padding-left:50px;}
.prettyprint.linenums li {border-left:3px solid #ccc;}

.dc-left, .dc-right {position:absolute;top:0;bottom:0;padding:5px;}
.dc-left {left:0;width:500px;}
.dc-right {left:500px;right:0;}

.dc-domain {position:relative;}
.dc-domain button {position:absolute;top:-2px;right:18px;z-index:1000;}
.dc-domain .form-item {flex-direction:column;}

pre {font-family:inherit;font-size:14px;line-height:20px;}
pre.tips {border-left:5px solid #5bc0de;}
pre.demo {padding-left:10px;border-left:5px solid #ccc;color:#333;}
pre.code {
    position:absolute;top:55px;bottom:10px;left:5px;right:5px;overflow:auto;
    border:1px solid #ccc;border-left-width:5px;border-left-color:#337ab7;padding:5px;
    -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}